<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <link rel="stylesheet" href="../css/password.css">
    <!--导入jquery-->
    <script src="../plugins/jquery-3.3.1.js"></script>
    <script src="../validate/jquery.validator.min.js"></script>
    <script src="../validate/local/zh-CN.js"></script>
    <link href="../validate/jquery.validator.css" rel="stylesheet">

    <script>

        function checknewPassword() {
            //1.获取密码值
            var password = $("#new_password").val();
            //2.定义正则
            var reg_password = /^\w{6,12}$/;

            //3.判断，给出提示信息
            var flag = reg_password.test(password);
            if (flag) {
                //密码合法
                $("#new_password").css("border", "");
            } else {
                //密码非法,加一个红色边框
                $("#new_password").css("border", "1px solid red");
            }
            return flag
        }

        function checkconfirmPassword() {
            //1.获取密码值
            var password = $("#confirm_password").val();
            //2.定义正则
            var reg_password = /^\w{6,12}$/;

            //3.判断，给出提示信息
            var flag = reg_password.test(password);
            if (flag) {
                //密码合法
                $("#confirm_password").css("border", "");
            } else {
                //密码非法,加一个红色边框
                $("#confirm_password").css("border", "1px solid red");
            }
            return flag
        }

        $(function () {
            //当表单提交时，调用所有的校验方法
            $("#passwordForm").submit(function () {
                //1.发送数据到服务器
                if (checknewPassword() && checkconfirmPassword() ) {
                    //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123

                    $.post("/travel/system/userInfo/confirmPassword", $(this).serialize(), function (data) {
                        //处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}

                        if (data.flag) {
                            //注册成功，跳转成功页面
                            location.href = "/travel/system/userInfo/password?username="+$("#username_off").val()+"&password="+$("#new_password").val();
                        } else {
                            //注册失败,给errorMsg添加提示信息
                            $("#errorMsg").html(data.errorMsg);
                        }
                    });

                }
                //2.不让页面跳转
                return false;
                //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
            });
            $("#new_password").blur(checknewPassword);
            $("#confirm_password").blur(checkconfirmPassword);
        });
    </script>

</head>
<body>
<div class="rg_layout">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>修改密码</p>
            <p>UPDATE PASSWORD</p>
        </div>
        <div class="rg_form_center">
            <div id="errorMsg" style="color:red;text-align: center"></div>
            <form id="passwordForm" action="#" method="post">
                <!--提交处理请求的标识符-->
                <input type="hidden" name="action" value="password">
                <table style="margin-top: 25px;">
                    <tr>
                        <td class="td_left">
                            <label for="username_off">用户名</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="username_off" name="username" placeholder="请输入账号" readonly="readonly"
                                   value="${username}" >
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left-u">
                            <label for="new_password">新密码</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="new_password" name="password" placeholder="请输入新密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left_u">
                            <label for="confirm_password">确认密码</label>
                        </td>
                        <td class="td_right">
                            <input type="text" id="confirm_password" name="c_password" placeholder="请确认密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left_u">
                        </td>
                        <td class="td_right check">
                            <input type="submit" class="submit" value="完成">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</div>
</body>
</html>
